<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">活动签到</text>
			<text class="header-subtitle">{{activity.name || '加载中...'}}</text>
		</view>

		<!-- 倒计时条 -->
		<view class="countdown-bar" :class="activityStatus">
			<uni-icons type="notification" size="18" color="#fff" />
			<text class="countdown-text">{{countdownText}}</text>
		</view>

		<!-- 活动信息卡片 -->
		<view class="card">
			<view class="card-header">
				<uni-icons type="calendar" size="18" color="#1890ff" />
				<text class="card-title">活动信息</text>
			</view>
			<view class="card-content">
				<view class="info-item">
					<text class="info-label">地点：</text>
					<text class="info-value">{{activity.locationName || '未设置'}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">时间：</text>
					<text class="info-value">{{activity.date}}
						{{activity.timeRange.start}}-{{activity.timeRange.end}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">有效范围：</text>
					<text class="info-value">{{ formattedValidRadius }}</text>
				</view>
				<view v-if="countdown" class="info-item">
					<text class="info-label">倒计时：</text>
					<text class="info-value">{{countdown}}</text>
				</view>
			</view>
		</view>

		<!-- 用户信息卡片 -->
		<view class="card">
			<view class="card-header">
				<uni-icons type="person" size="18" color="#1890ff" />
				<text class="card-title">签到信息</text>
			</view>
			<view class="card-content">
				<view class="info-item">
					<text class="info-label">姓名：</text>
					<text class="info-value">{{user.name}}<text class="status-tag"
							:class="{'signed': hasChecked}">{{checkinStatus}}</text></text>
				</view>
				<view class="info-item">
					<text class="info-label">部门：</text>
					<text class="info-value">{{user.department || '未设置'}}</text>
				</view>
				<view class="location-info">
					<text class="info-label">位置：</text>
					<view class="location-details">
						<text class="info-value">{{location.address}}</text>
						<text class="info-extra">经度: {{location.longitude.toFixed(6)}}</text>
						<text class="info-extra">纬度: {{location.latitude.toFixed(6)}}</text>
						<!-- 【新增】显示与目标的距离 -->
						<text class="info-extra distance-info">距离目标: {{ formattedDistance }}</text>
						<view class="location-status" :class="{'success': inLocationRange, 'error': !inLocationRange}">
							{{inLocationRange ? `✓ 在范围内 (${formattedValidRadius})` : '✗ 超出范围'}}
						</view>
					</view>
				</view>
				<!-- 【新增】设备签到状态 -->
				<view class="info-item device-info" v-if="deviceHasChecked">
					<text class="info-label">设备状态：</text>
					<text class="info-value warning">该设备已签到过</text>
				</view>
			</view>
		</view>

		<!-- 签到按钮 -->
		<view class="sign-button-wrapper">
			<button class="custom-sign-button" :class="buttonClass"
				:disabled="!canCheckin || hasChecked || deviceHasChecked" @click="handleCheckin" type="primary"
				:loading="false">
				<view class="button-content">
					<uni-icons v-if="hasChecked" type="checkbox-filled" size="20" color="#fff" />
					<uni-icons v-else-if="deviceHasChecked" type="close" size="20" color="#fff" />
					<uni-icons v-else-if="!inTimeRange" type="clock" size="20" color="#fff" />
					<uni-icons v-else-if="!inLocationRange" type="location" size="20" color="#fff" />
					<uni-icons v-else type="plus" size="20" color="#fff" />
					<text>{{ buttonText }}</text>
				</view>
			</button>
		</view>

		<!-- 签到人员列表 -->
		<view class="user-list" v-if="signedUsers.length > 0">
			<view class="list-header" @click="toggleUserList">
				<text>已签到人员</text>
				<text class="list-count">{{ signedUsers.length }}人</text>
				<uni-icons type="arrowdown" size="16" color="#999" :class="{ 'rotate': isUserListExpanded }" />
			</view>
			<scroll-view scroll-y class="list-container" :style="{ maxHeight: isUserListExpanded ? '300px' : '0' }">
				<!-- 在 user-item 部分添加特殊样式 -->
				<view v-for="(user, index) in signedUsers" :key="index" class="user-item"
					:class="{ 'self': user.userid === currentUserID }">
					<view class="avatar" :class="{ 'self-avatar': user.userid === currentUserID }">
						<image :src="user.avatar || '/static/avatar/empty.png'" mode="aspectFill" />
					</view>
					<view class="user-info">
						<view class="name-wrapper">
							<text class="user-name">{{ user.name }}</text>
							<text v-if="user.userid === currentUserID" class="self-tag">我</text>
						</view>
						<text class="user-department">{{ user.department }}</text>
					</view>
					<view class="sign-time truncate">
						<text>{{ user.time.split(' ')[1].substring(0, 5) }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 导出按钮 -->
		<view class="export-button-wrapper" v-if="signedUsers.length > 0 && isCurrentUserAdmin">
			<button class="custom-export-button" @click="exportCheckinData" type="default">
				<view class="button-content">
					<uni-icons type="download" size="20" color="#1890ff" />
					<text>导出签到情况(CSV)</text>
				</view>
			</button>
		</view>

		<!-- 定位提示 -->
		<view class="location-tip">
			<text>定位精度：{{locationAccuracy}}米 | 点击下方按钮刷新定位</text>
		</view>

		<!-- FAB 按钮 -->
		<uni-fab horizontal="right" vertical="bottom" iconType="font" :pattern="pattern"
			@fabClick="handleRefreshLocation" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					icon: 'location',
					color: '#fff',
					backgroundColor: '#1890ff',
					selectedColor: '#fff',
					buttonColor: '#1890ff'
				},
				// 活动信息
				activityId: '',
				activity: {
					name: '',
					date: '',
					timeRange: {
						start: '',
						end: ''
					},
					locationName: '',
					latitude: 0,
					longitude: 0,
					validRadius: 100, // 默认有效范围100米
					expectedCount: 50 // 示例数据
				},

				// 当前用户信息
				user: {
					userid: '',
					avatar: '',
					name: "",
					department: ""
				},

				// 当前定位信息
				location: {
					latitude: 0,
					longitude: 0,
					address: "定位中...",
					accuracy: 0
				},

				// 签到状态
				inTimeRange: false,
				inLocationRange: false,
				hasChecked: false, // 是否已打卡
				distanceFromActivity: null, // 【新增】存储与目标的距离

				// 签到用户列表
				signedUsers: [],

				// 倒计时
				countdown: '',

				// 活动状态：'pending'（未开始）, 'in_progress'（进行中）, 'ended'（已结束）
				activityStatus: 'pending',

				// 倒计时定时器
				countdownTimer: null,

				// 控制签到人员列表展开/收起
				isUserListExpanded: false,

				// 当前用户是否为管理员
				isCurrentUserAdmin: false,

				// 【新增】设备唯一标识
				deviceId: '',
				// 【新增】设备是否已签到
				deviceHasChecked: false
			}
		},
		computed: {
			// 【新增】格式化有效范围显示
			formattedValidRadius() {
				if (!this.activity.validRadius) return '--';
				if (this.activity.validRadius >= 1000) {
					return `${(this.activity.validRadius / 1000).toFixed(1)}公里`;
				}
				return `${this.activity.validRadius}米`;
			},
			// 【新增】格式化距离显示
			formattedDistance() {
				if (this.distanceFromActivity === null) {
					return '计算中...';
				}
				if (this.distanceFromActivity >= 1000) {
					return `${(this.distanceFromActivity / 1000).toFixed(2)} 公里`;
				}
				return `${Math.round(this.distanceFromActivity)} 米`;
			},
			locationAccuracy() {
				return this.location.accuracy ? Math.round(this.location.accuracy) : '未知';
			},
			canCheckin() {
				return this.inTimeRange && this.inLocationRange && !this.deviceHasChecked
			},
			buttonText() {
				if (this.hasChecked) return '已签到'
				if (this.deviceHasChecked) return '设备已签到' // 【新增】设备已签到提示
				if (!this.inTimeRange) return '不在签到时间'
				if (!this.inLocationRange) return '不在活动地点'
				return '立即签到'
			},
			buttonClass() {
				if (this.hasChecked) return 'btn-checked'
				if (this.deviceHasChecked) return 'btn-device-disabled' // 【新增】设备已签到样式
				if (!this.inTimeRange) return 'btn-time-disabled'
				if (!this.inLocationRange) return 'btn-location-disabled'
				return 'btn-sign-in'
			},
			checkinStatus() {
				if (this.hasChecked) {
					const currentUser = this.signedUsers.find(u => u.userid === this.user.userid);
					if (currentUser) {
						return currentUser.time.split(' ')[1].substring(0, 5);
					}
					return '已签到';
				}
				return '未签到';
			},
			currentUserInfo() {
				return uni.getStorageSync('userInfo') || {}
			},
			currentUserID() {
				return this.currentUserInfo._id
			},
			countdownText() {
				switch (this.activityStatus) {
					case 'pending':
						return '活动未开始'
					case 'ended':
						return '活动已结束'
					default:
						return `距离签到结束还有：${this.countdown}`
				}
			}
		},
		onLoad() {
			this.activityId = uni.$router.params._id
			this.getLocation()
			this.initData(this.activityId) // 从云端加载活动数据
			this.getsignedUsers(this.activityId)
			this.initUserInfo()
			this.checkIfCurrentUserAdmin()
			this.getDeviceId() // 【新增】获取设备ID
		},
		onUnload() {
			// 页面卸载时清除倒计时
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer)
			}
		},
		methods: {
			// 【新增】获取设备唯一标识
			async getDeviceId() {
				try {
					const systemInfo = await uni.getSystemInfo();
					if (systemInfo.deviceId) {
						this.deviceId = systemInfo.deviceId;
						console.log('获取设备ID:', this.deviceId);
					} else {
						// 如果无法获取设备ID，使用随机UUID作为替代方案
						this.deviceId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
							const r = Math.random() * 16 | 0,
								v = c === 'x' ? r : (r & 0x3 | 0x8);
							return v.toString(16);
						});
						console.log('生成随机设备ID:', this.deviceId);
					}
				} catch (err) {
					console.error('获取设备信息失败', err);
					// 生成随机UUID作为备选
					this.deviceId = Math.random().toString(36).substr(2, 10);
					console.log('使用备选设备ID:', this.deviceId);
				}
			},

			toggleUserList() {
				this.isUserListExpanded = !this.isUserListExpanded
			},
			handleRefreshLocation() {
				uni.showLoading({
					title: '正在刷新定位...',
					mask: true
				});
				this.getLocation().finally(() => {
					setTimeout(() => uni.hideLoading(), 1000); // 隐藏 loading
				});
			},
			async initData(_id) {
				const obj = uniCloud.importObject('check')
				const res = await obj.getActivitiesById({
					_id: _id
				})
				if (res.code === 0 && res.data[0]) {
					this.activity = res.data[0]
					// 确保validRadius有默认值
					if (!this.activity.validRadius) {
						this.activity.validRadius = 500; // 默认500米
					}
					this.checkTimeRange()
					this.startCountdown()
				}
			},
			initUserInfo() {
				const userinfo = this.currentUserInfo
				if (!userinfo || !userinfo._id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				this.user.userid = userinfo._id
				this.user.name = userinfo.username
				this.user.avatar = userinfo.avatar
				this.user.department = userinfo.d_ids?.text || '未设置'
			},
			async getsignedUsers(id) {
				const obj = uniCloud.importObject('check')
				const res = await obj.getCheckinRecord({
					activityId: id
				})
				if (res.code === 0) {
					this.signedUsers = res.data.map(item => ({
						userid: item.userid,
						avatar: item.avatar || '',
						name: item.name,
						department: item.department,
						time: item.time,
						latitude: item.latitude,
						longitude: item.longitude,
						deviceId: item.deviceId // 【新增】保存设备ID
					}))
					// 判断当前用户是否已签到
					const currentUser = this.signedUsers.find(user => user.userid === this.user.userid)
					this.hasChecked = !!currentUser

					// 【新增】判断当前设备是否已签到
					if (this.deviceId) {
						this.deviceHasChecked = this.signedUsers.some(user => user.deviceId === this.deviceId)
					}
				}
			},
			async requestLocationPermission() {
				const res = await uni.getSystemSetting()
				if (res.platform === 'devtools') {
					this.getLocation()
					return
				}
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						this.getLocation()
					},
					fail: () => {
						uni.showToast({
							title: '请授权定位权限',
							icon: 'none'
						})
					}
				})
			},
			async getLocation() {
				try {
					const res = await uni.getLocation({
						type: 'wgs84',
						geocode: true
					})
					this.location.latitude = res.latitude
					this.location.longitude = res.longitude
					this.location.accuracy = res.accuracy
					this.location.address = res.address?.formattedAddress || ''

					const distance = this.calculateDistance(
						res.latitude,
						res.longitude,
						this.activity.latitude,
						this.activity.longitude
					)
					// 【修改】存储计算出的距离
					this.distanceFromActivity = distance;

					// 【修改】使用后端返回的有效范围判断
					this.inLocationRange = distance <= this.activity.validRadius

				} catch (err) {
					uni.showToast({
						title: '定位失败',
						icon: 'none'
					})
				}
			},
			calculateDistance(lat1, lon1, lat2, lon2) {
				const R = 6371000
				const dLat = (lat2 - lat1) * Math.PI / 180
				const dLon = (lon2 - lon1) * Math.PI / 180
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2)
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
				return R * c
			},
			checkTimeRange() {
				const now = new Date();

				const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
				const activityDate = new Date(this.activity.date);
				const activityDateOnly = new Date(activityDate.getFullYear(), activityDate.getMonth(), activityDate
					.getDate());

				// 活动未开始
				if (today < activityDateOnly) {
					this.activityStatus = 'pending';
					this.inTimeRange = false;
					return;
				}

				// 活动已结束
				if (today > activityDateOnly) {
					this.activityStatus = 'ended';
					this.inTimeRange = false;
					return;
				}

				// 今天是活动当天
				this.activityStatus = 'in_progress';

				// 构造活动开始和结束时间
				const [startHour, startMinute] = this.activity.timeRange.start.split(':').map(Number);
				const [endHour, endMinute] = this.activity.timeRange.end.split(':').map(Number);

				const startTime = new Date(today);
				startTime.setHours(startHour, startMinute, 0, 0);

				const endTime = new Date(today);
				endTime.setHours(endHour, endMinute, 0, 0);

				// 活动未开始
				if (now < startTime) {
					this.activityStatus = 'pending';
					this.inTimeRange = false;
					return;
				}

				// 活动已结束
				if (now > endTime) {
					this.activityStatus = 'ended';
					this.inTimeRange = false;
					return;
				}

				// 判断是否在签到时间范围内
				this.inTimeRange = now >= startTime && now <= endTime;
			},
			startCountdown() {
				clearInterval(this.countdownTimer);

				const now = new Date();
				const activityDate = new Date(this.activity.date);
				const activityDateOnly = new Date(activityDate.getFullYear(), activityDate.getMonth(), activityDate
					.getDate());

				// 活动还未开始
				if (now < activityDateOnly) {
					this.countdown = '活动还未开始';
					this.activityStatus = 'pending';
					return;
				}

				// 活动已经结束（超过活动日的 23:59）
				const activityEndDate = new Date(activityDateOnly);
				activityEndDate.setHours(23, 59, 59, 999);
				if (now > activityEndDate) {
					this.countdown = '活动已结束';
					this.activityStatus = 'ended';
					return;
				}

				// 构造活动开始和结束时间
				const [startHour, startMinute] = this.activity.timeRange.start.split(':').map(Number);
				const [endHour, endMinute] = this.activity.timeRange.end.split(':').map(Number);

				const startTime = new Date(activityDateOnly);
				startTime.setHours(startHour, startMinute, 0, 0);

				const endTime = new Date(activityDateOnly);
				endTime.setHours(endHour, endMinute, 0, 0);

				// 判断是否在签到时间范围内
				const inTimeRange = now >= startTime && now <= endTime;

				if (now < startTime) {
					this.countdown = '活动还未开始';
					this.activityStatus = 'pending';
					return;
				}

				if (now > endTime) {
					this.countdown = '签到已结束';
					this.activityStatus = 'ended';
					return;
				}

				// 如果在签到时间范围内，开始倒计时
				const updateCountdown = () => {
					const now = new Date();
					const diff = endTime - now;

					if (diff <= 0) {
						this.countdown = '签到已结束';
						this.activityStatus = 'ended';
						clearInterval(this.countdownTimer);
						return;
					}

					const hours = Math.floor(diff / 3600000);
					const minutes = Math.floor((diff % 3600000) / 60000);
					const seconds = Math.floor((diff % 60000) / 1000);

					this.countdown = `${hours}小时${minutes}分${seconds}秒`;
				};

				updateCountdown();
				this.countdownTimer = setInterval(updateCountdown, 1000);
			},
			async handleCheckin() {
				if (this.hasChecked || this.deviceHasChecked) return; // 【修改】添加设备检查
				if (!this.canCheckin) return;

				uni.showLoading({
					title: '正在签到...',
					mask: true
				});

				try {
					// 获取当前时间
					const time = uni.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');

					// 构造签到数据
					const checkinData = {
						activityId: this.activityId,
						userid: this.user.userid,
						avatar: this.user.avatar,
						name: this.user.name,
						department: this.user.department,
						time: time,
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						deviceId: this.deviceId // 【新增】添加设备ID
					};

					// 调用云函数提交签到信息
					const obj = uniCloud.importObject('check');
					const res = await obj.addCheckinRecord(checkinData);

					if (res.code === 0) {
						this.hasChecked = true;
						this.deviceHasChecked = true; // 【新增】标记设备已签到

						uni.showToast({
							title: '签到成功',
							icon: 'success'
						});
						// 提交成功，更新本地状态和签到列表
						this.getsignedUsers(this.activityId);
					} else {
						uni.showToast({
							title: '签到失败，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (err) {
					uni.showToast({
						title: '网络异常，请检查连接',
						icon: 'none',
						duration: 2000
					});
				} finally {
					uni.hideLoading();
				}
			},
			// 检查当前用户是否为管理员
			async checkIfCurrentUserAdmin() {
				const userinfo = uni.getStorageSync('userInfo')

				if (userinfo.role?.value >= 5) {
					this.isCurrentUserAdmin = true
				} else {
					this.isCurrentUserAdmin = false
				}
			},
			// 导出签到数据为CSV
			exportCheckinData() {
				// 获取活动日期并格式化
				const activityDate = this.activity.date ? this.activity.date.replace(/-/g, '') : '';

				// 创建带有活动名称和日期的文件名
				const filename = `${this.activity.name}${activityDate}-签到记录.csv`;

				// 将签到数据转换为CSV格式
				const csvContent = this.formatToCSV(this.signedUsers);

				// 触发下载
				this.downloadCSV(csvContent, filename);
			},
			// 格式化数据为CSV格式
			formatToCSV(data) {
				// 【修改】CSV头部新增设备ID字段
				const headers = ['姓名', '部门', '签到时间', '经度', '纬度', '设备ID']
				// 【修改】CSV行数据包含设备ID
				const rows = data.map(user => [
					user.name,
					user.department,
					user.time,
					user.longitude?.toFixed(6) || '', // 保留6位小数
					user.latitude?.toFixed(6) || '',
					user.deviceId || '' // 【新增】设备ID
				])
				// 组合CSV内容
				const csvRows = []
				csvRows.push(headers.join(','))
				for (const row of rows) {
					csvRows.push(row.join(','))
				}
				return csvRows.join('\r\n')
			},
			// 下载CSV文件
			downloadCSV(content, filename) {
				// 创建Blob对象
				const blob = new Blob(['\uFEFF', content], {
					type: 'text/csv;charset=utf-8;'
				})

				// 创建下载链接
				const url = URL.createObjectURL(blob)

				// 创建a标签并触发下载
				const link = document.createElement('a')
				link.setAttribute('href', url)
				link.setAttribute('download', filename)
				link.style.visibility = 'hidden'
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			}
		}
	}
</script>

<style lang="scss">
	/* 使用SCSS增强样式控制能力 */
	$primary-color: #1890ff;
	$secondary-color: #36a2ff;
	$success-color: #52c41a;
	$warning-color: #faad14;
	$error-color: #f5222d;
	$background-color: #f0f7ff;
	$card-background: #ffffff;
	$border-color: #e8e8e8;
	$text-color: #333;
	$text-light: #666;
	$text-lighter: #999;
	$shadow: 0 4px 12px rgba(24, 144, 255, 0.1);

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 0 16px 30px;
		background: linear-gradient(180deg, #f0f9ff 0%, #f0f7ff 100%);
		font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
		color: $text-color;
	}

	.header {
		padding: 30px 0 20px;
		text-align: center;

		.header-title {
			font-size: 24px;
			font-weight: 600;
			color: $primary-color;
			letter-spacing: 1px;
			display: block;
		}

		.header-subtitle {
			font-size: 16px;
			color: $text-light;
			margin-top: 8px;
			padding: 0 20px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.countdown-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 16px;
		margin: 0 0 20px;
		border-radius: 10px;
		background: linear-gradient(90deg, $primary-color, $secondary-color);
		color: #fff;
		font-size: 15px;
		box-shadow: $shadow;
		transition: all 0.3s ease;

		&.pending {
			background: linear-gradient(90deg, #faad14, #ffc53d);
		}

		&.ended {
			background: linear-gradient(90deg, #ff7875, #ff4d4f);
		}

		.countdown-text {
			margin-left: 8px;
			font-weight: 500;
		}
	}

	.card {
		background: $card-background;
		border-radius: 12px;
		margin-bottom: 16px;
		overflow: hidden;
		box-shadow: $shadow;
		border: 1px solid rgba(24, 144, 255, 0.1);

		.card-header {
			display: flex;
			align-items: center;
			padding: 16px;
			border-bottom: 1px solid $border-color;
			background: rgba(24, 144, 255, 0.03);

			.card-title {
				font-size: 17px;
				font-weight: 600;
				color: $primary-color;
				margin-left: 8px;
			}
		}

		.card-content {
			padding: 16px;
		}
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 14px;
		font-size: 15px;

		&:last-child {
			margin-bottom: 0;
		}

		.info-label {
			color: $text-light;
			min-width: 70px;
		}

		.info-value {
			flex: 1;
			color: $text-color;
			font-weight: 500;

			// 【新增】设备状态警告样式
			&.warning {
				color: $error-color;
				font-weight: bold;
			}
		}

		.info-extra {
			display: block;
			margin-top: 4px;
			font-size: 12px;
			color: $text-lighter;
		}

		.status-tag {
			display: inline-block;
			padding: 2px 8px;
			margin-left: 8px;
			border-radius: 4px;
			font-size: 12px;
			background: #f0f0f0;
			color: $text-lighter;

			&.signed {
				background: #e6f7ff;
				color: $primary-color;
				font-weight: 500;
			}
		}

		// 【新增】设备信息样式
		&.device-info {
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px dashed #eee;
		}
	}

	.location-info {
		display: flex;
		align-items: flex-start;
		padding-top: 10px;
		margin-top: 10px;
		border-top: 1px dashed $border-color;

		.location-details {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.info-extra {
			display: block;
			margin-top: 4px;
			font-size: 12px;
			color: $text-lighter;
		}

		/* 【新增】距离信息的专属样式 */
		.distance-info {
			color: $primary-color;
			font-weight: 500;
		}
	}

	.location-status {
		margin-top: 6px;
		font-size: 12px;
		font-weight: 500;

		&.success {
			color: #13c2c2;
		}

		&.error {
			color: #f5222d;
		}
	}

	.sign-button-wrapper {
		margin: 25px 0 30px;

		.custom-sign-button {
			border: none;
			border-radius: 50px;
			height: 52px;
			line-height: 52px;
			font-size: 18px;
			font-weight: 500;
			transition: all 0.3s ease;
			box-shadow: $shadow;
			overflow: hidden;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(255, 255, 255, 0.2);
				opacity: 0;
				transition: opacity 0.3s;
			}

			&:active::after {
				opacity: 1;
			}

			.button-content {
				display: flex;
				align-items: center;
				justify-content: center;

				uni-icons {
					margin-right: 8px;
				}
			}
		}

		.btn-sign-in {
			background: linear-gradient(45deg, $primary-color, $secondary-color);
			color: #fff;
		}

		.btn-time-disabled {
			background: linear-gradient(45deg, #faad14, #ffc53d);
			color: #fff;
		}

		.btn-location-disabled {
			background: linear-gradient(45deg, #ff7875, #ff4d4f);
			color: #fff;
		}

		// 【新增】设备已签到样式
		.btn-device-disabled {
			background: linear-gradient(45deg, #ff7875, #ff4d4f);
			color: #fff;
			opacity: 0.8;
		}

		.btn-checked {
			background: linear-gradient(45deg, #bae637, #95de64);
			color: #fff;
		}
	}

	.user-list {
		background: $card-background;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: $shadow;
		margin-bottom: 20px;

		.list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 14px 16px;
			font-size: 16px;
			font-weight: 500;
			color: $primary-color;
			border-bottom: 1px solid $border-color;
			background: rgba(24, 144, 255, 0.03);
			cursor: pointer;
			user-select: none;

			.uni-icons {
				transition: transform 0.3s ease;
			}

			.rotate {
				transform: rotate(180deg);
			}
		}

		.list-container {
			overflow: hidden;
			transition: max-height 0.3s ease-out;
			max-height: 0;
		}

		.user-item {
			display: flex;
			align-items: center;
			padding: 14px 0;
			border-bottom: 1px solid $border-color;

			&:last-child {
				border-bottom: none;
			}

			&.self {
				background: rgba(24, 144, 255, 0.05);
				border-radius: 8px;
				margin: 0 -16px;
				padding: 14px 16px;
				border-bottom: none;

				.avatar {
					background: linear-gradient(45deg, $primary-color, $secondary-color);
					color: #fff;
				}
			}

			.avatar {
				width: 45px;
				height: 45px;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.avatar image {
				width: 100%;
				height: 100%;
			}

			.user-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.user-name {
					font-size: 16px;
					font-weight: 500;
					margin-bottom: 4px;
				}

				.user-department {
					font-size: 13px;
					color: $text-light;
				}
			}

			.sign-time {
				font-size: 14px;
				color: $text-lighter;
				flex-shrink: 0;
				min-width: 50px;
				text-align: right;
			}
		}

		// 在样式部分添加以下内容
		.user-item.self {
			background: rgba(24, 144, 255, 0.05);
			border-radius: 8px;
			margin: 0 -16px;
			padding: 14px 16px;
			border-bottom: none;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: 1px solid $primary-color;
				border-radius: 8px;
				pointer-events: none;
			}
		}

		.self-avatar {
			border: 2px solid $primary-color !important;
			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
		}

		.name-wrapper {
			display: flex;
			align-items: center;
		}

		.self-tag {
			display: inline-block;
			background: $primary-color;
			color: #fff;
			font-size: 10px;
			padding: 0 4px;
			border-radius: 2px;
			margin-left: 6px;
			line-height: 16px;
		}

		.truncate {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 70px;
			margin-right: 10rpx;
		}
	}

	.location-tip {
		text-align: center;
		font-size: 12px;
		color: $text-lighter;
		margin-top: 10px;
	}

	/* 响应式调整 */
	@media (max-width: 320px) {
		.header-title {
			font-size: 22px !important;
		}

		.sign-button-wrapper .custom-sign-button {
			height: 48px;
			line-height: 48px;
			font-size: 16px;
		}
	}
</style>